import React, { Component } from 'react'
import { connect } from 'react-redux'
import styled from 'styled-components'

const ToTalPriceWrapper = styled.div`
  width: 100%;
  height: 60px;
  background: #ccc;
  text-align:center;
  line-height: 60px;
  font-size: 25px;
`;

class TotalPrice extends Component {
  render() {
    return (
      <ToTalPriceWrapper>
        总价：{ this.getTotalPrice() }
      </ToTalPriceWrapper>
    )
  }

  getTotalPrice () {
    // 高阶函数  （自己可以指定第一个参数）total = 0;
    return this.props.cartData.reduce((total, item) => {
      return total + item.count * item.price
    }, 0)
  }
}

const mapState = (state) => {
  return {
    cartData: state.cart.cartData
  }
}


export default connect(mapState, null)(TotalPrice)
